<template>
  <div class="header">
    <div class="flow-title">
      <div class="flow-title-left">
        <div class="line" />
        <div class="text">
          {{ $t('dataAnalysis.pVOverview') }}
        </div>
      </div>
      <div class="flow-title-right">
        <!-- 时间选择框 left -->
        <span>{{ $t('dataAnalysis.statisticalTime') }}：</span>
        <div class="flow-title-time-select">
          <el-select
            v-model="dateValue"
            style="width:100px; margin-right: 20px"
            @change="setDateRange(dateValue)"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- /时间选择框 left -->

        <!-- 时间选择框 right -->
        <div v-if="dateValue >= 4">
          <span
            v-if="dateValue === 4"
            style="margin-right: 20px"
          >{{ nowDate }}</span>
          <div
            v-if="dateValue === 4"
            class="default-btn"
            @click="flushDateTime"
          >
            {{ $t('dataAnalysis.refresh') }}
          </div>
          <span
            v-if="dateValue === 5 || dateValue === 6"
          >{{ dateRange[0] }} {{ $t('date.tip') }} {{ dateRange[1] }}</span>
        </div>
        <div v-if="dateValue === 1">
          <el-date-picker
            v-model="dateRange[0]"
            :disabled-date="onDateDisabled"
            style="width: 150px;"
            type="date"
            :placeholder="$t('dataAnalysis.selectDate')"
            :picker-options="PickerOptions"
          />
        </div>
        <div v-if="dateValue === 3">
          <el-date-picker
            v-model="preMonth"
            :disabled-date="onDateDisabled"
            style="width: 150px;"
            type="month"
            :placeholder="$t('dataAnalysis.selectMonth')"
            :picker-options="monthPickerOptions"
          />
        </div>
        <div
          v-if="dateValue === 2"
          class="time-region-selection"
        >
          <el-date-picker
            v-model="weekRange"
            style="width: 230px;"
            type="week"
            :disabled-date="onDateDisabled"
            :picker-options="weekPickerOptions"
            :format="weekRangeFormat"
            :placeholder="$t('dataAnalysis.selectWeek')"
          />
        </div>
        <!-- /时间选择框 right -->
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'

/**
 * 限制‘今天’日期后不可选择
 */
const onDateDisabled = (time) => {
  return time.getTime() >= moment().add(-1, 'days').valueOf()
}

const dateValue = ref(5) // 时间选择状态
const nowDate = ref(null)
const preMonth = ref('')
const monthPickerOptions = reactive({
  disabledDate (time) {
    const month1 = moment().startOf('month')
    return (
      time.getTime() > month1.valueOf()
    )
  }
})
const PickerOptions = reactive({
  disabledDate (time) {
    const date = moment().add(0, 'days').startOf('days')
    return (
      time.getTime() >= date.valueOf()
    )
  }
})
const weekPickerOptions = reactive({
  disabledDate (time) {
    const month1 = moment().add(-1, 'week').endOf('week')
    return (
      time.getTime() > month1.valueOf()
    )
  }
})
const dateOptions = [
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalWeek'),
    value: 2
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  },
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  }
]

const dateRange = ref([])
const emit = defineEmits(['onDateValueChange'])
watch(() => dateRange.value, () => {
  const timeType = dateValue.value
  const startTime = moment(dateRange.value[0]).unix() * 1000 // 转成时间戳格式
  emit('onDateValueChange', { timeType, startTime })
},
{ deep: true, immediate: true }
)

const weekRange = ref('')
const weekRangeFormat = ref('')
watch(() => weekRange.value, newVal => {
  const d = moment(newVal).startOf('week')
  dateRange.value = []
  dateRange.value.push(newVal)
  weekRangeFormat.value = 'YYYY-MM-DD - ' + moment(d).endOf('week').format('L')
})

watch(() => preMonth.value, newVal => {
  const d = moment(newVal).startOf('month')
  dateRange.value = []
  dateRange.value.push(d)
})

/**
 * 刷新时间
 */
const flushDateTime = () => {
  const date = new Date()
  nowDate.value = moment(date).format('LL')
  http({
    url: http.adornUrl('/admin/flowAnalysis/refresh'),
    method: 'get'
  }).then(() => {
    dateRange.value = []
    dateRange.value.push(date)
  })
}
/**
 * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月(前一个月如当前月为7月，自然月为6月)
 * 改：// 1:自然日  2:自然周 3:自然月 4:今日实时 5:近七天 6:近30天
 */
const setDateRange = (val) => {
  let startDay = null
  let endDay = null
  dateValue.value = val
  if (val === 4) {
    flushDateTime()
    return
  } else if (val === 5) {
    startDay = -7
    endDay = -1
  } else if (val === 6) {
    startDay = -31
    endDay = -1
  } else if (val === 1) {
    startDay = -1
    endDay = -1
  } else if (val === 3) {
    preMonth.value = getPreMonth()
    return
  } else if (val === 2) {
    weekRange.value = moment(moment().add(-1, 'week')).startOf('week')
    return
  } else {
    return
  }
  // 开始时间
  const startTime = moment().add(startDay, 'days').format('L')
  // 结束时间
  const endTime = moment().add(endDay, 'days').format('L')
  dateRange.value = [startTime, endTime]
}
/**
 * 获取前一个月的时间
 */
const getPreMonth = () => {
  const obj = moment(moment().add(-1, 'month')).startOf('month')
  dateRange.value = []
  dateRange.value.push(obj)
  return obj
}

onMounted(() => {
  // 初始化自然日
  setDateRange(5)
})

</script>

<style lang="scss" scoped>
 @use '../index.scss';
.header {
  .flow-title {
    margin-top: 0;
  }
  .flow-title-time-select {
    .default-btn {
      margin-left: 20px;
    }
  }
}
 .time-region-selection {
   :deep(.el-input__wrapper) {
     width: 240px;
   }
 }
</style>
